<template>
  <div class="shopList">
    <h1 id="area">商品列表</h1>
    <el-form :inline="true" label-position="right" label-width="770">
      <el-form-item label="请输入">
        <el-input
          @blur="BBB"
          v-model="keyword"
          placeholder="请输入商品名"
          @keydown.enter="handleSearch"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="Letter">
      <div
        class="letter-item"
        @click="rout(i, l.data.num)"
        v-for="(l, i) in indexs"
        :key="i"
        :style="{
          cursor: l.data.num == 0 ? 'not-allowed' : '',
        }"
      >
        {{ l.data.t }}
      </div>
    </div>
    <div class="c">
      <div class="shopContent" v-for="(l, i) in indexs" :key="i">
        <el-divider
          content-position="center"
          class="content-index"
          :border-style="l.data.num == 0 ? 'dashed' : ''"
          :style="{
            borderColor: l.data.num == 0 ? 'red' : '',
            fontSize: l.data.num == 0 ? '20px' : '',
          }"
          >{{ l.text }}</el-divider
        >
        <div class="concat">
          <div class="content" v-for="(item, index) in l.data.num" :key="index">
            <div class="c">
              <img :src="l.data.img" alt="" />
            </div>
            <p>
              <span>{{ l.data.price }}</span>
              <span
                @click="HandleShow(l, $event)"
                :data-index="Math.floor(Math.random() * (100 - 0)) + 0"
                ref="dataN"
                :class="{ active: index == showIndex }"
                >{{ show }}</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="backtop" @click="scrollTop">
      <el-icon size="30px"><ArrowUp /></el-icon>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    let store = useStore()
    const keyword = ref('')
    onMounted(() => {
      le()
    })
    // 搜索
    const handleSearch = () => {
      indexs.value = indexs.value.filter(
        (item) => item.data.price == keyword.value
      )
      keyword.value = ''
      let b = indexs
      let a = computed(() => {})
      // console.log('搜索', keyword.value)
    }
    // 失去焦点
    const BBB = () => {
      console.log('失去')
    }
    // 英文字母
    let letter = [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
      'R',
      'S',
      'T',
      'U',
      'V',
      'W',
      'X',
      'Y',
      'Z',
    ]
    // 随机数量
    const ra = Math.floor(Math.random() * (5 - 0)) + 0
    // 数组增加
    const indexs = ref([])
    const le = () => {
      indexs.value = letter.map((item) => {
        return {
          text: item,
          data: {
            t: item,
            num: Math.floor(Math.random() * (5 - 0)) + 0,
            price: Math.floor(Math.random() * (100 - 0)) + 0,
            img: 'https://infinity-permanent.infinitynewtab.com/infinity/search-add/baidu.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim',
            state: 0,
          },
        }
      })
      // letter.value.splice(0, 26)
    }
    // 跳转-num为0时禁止跳转
    const rout = (i, num) => {
      let t = document.querySelector('.c')
      if (num !== 0) {
        t.children[i].scrollIntoView({ block: 'center', behavior: 'smooth' })
      }
    }
    // 收藏功能
    const show = ref('收藏')
    const showIndex = ref(-1)
    const HandleShow = (l, a) => {
      let Collection = a.currentTarget

      Collection.innerText = '已收藏'
      Collection.className = 'active'
      l.state = 1
      store.commit('Collection', l)
    }
    // 回到顶部
    const scrollTop = () => {
      let scroll = document.querySelector('#area')
      scroll.scrollIntoView({ block: 'center', behavior: 'smooth' })
    }
    // const Line = ref("black")
    return {
      keyword,
      handleSearch,
      letter,
      rout,
      ra,
      HandleShow,
      show,
      showIndex,
      scrollTop,
      BBB,
      indexs,
    }
  },
})
</script>
<style lang="less" scoped>
.shopList {
  position: relative;
  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .el-form {
    margin-bottom: 10px;
  }
  .Letter {
    width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 20px;
    .letter-item {
      &:hover {
        color: red;
      }
    }
  }
  .shopContent {
    margin-bottom: 10px;
    padding: 0 100px;

    .content-index {
      text-align: center;
      border-width: 2px;
      /deep/.el-divider__text {
        background: none;
        padding: 0;
        font-size: 100%;
      }
    }
    .concat {
      display: flex;
      align-items: center;
      .content {
        margin-right: 50px;
        .c {
          width: 100px;
          height: 100px;
          background-color: #8cefe9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 5px;
          span {
            &:nth-child(2) {
              background: rgba(248, 105, 2, 0.992);
              border-radius: 25px;
              color: white;
              font-size: 12px;
              padding: 3px 10px;
              cursor: pointer;
            }
          }
          .active {
            background: bisque !important;
            color: black !important;
          }
        }
      }
    }
  }
  .backtop {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .el-icon {
      margin: 0 auto;
    }
  }
}
</style>
